<template>
	<view class="content">
		<view class="tab">
			<view :class="['list',active==1?'active':'']" @tap="checktab(1)">未下单</view>
			<view :class="['list',active==2?'active':'']" @tap="checktab(2)">运输中</view>
			<view :class="['list',active==3?'active':'']" @tap="checktab(3)">已签收</view>
		</view>
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="item">
				<view class="code">
					<text>订单号 {{item.sn_code}}</text>
				</view>
				<view class="list status">
					<text class="name">订单状态</text>
					<text >待下单</text>
				</view>
				<view v-for="g in item.goods">
					<view class="list">
						<text class="name">商品名称</text>
						<text>{{g.goods_name}}</text>
					</view>
					<view class="list">
						<text class="name">运输单价</text>
						<text>{{(g.goods_price*1).toFixed(4)}}</text>
					</view>
					<view class="list">
						<text class="name">运输数量</text>
						<text>{{(g.goods_num*1).toFixed(4)}}</text>
					</view>
				</view>
				<view class="list">
					<text class="name">已运输数量</text>
					<text>555</text>
				</view>
				<view class="list">
					<text class="name">创建时间</text>
					<text>{{item.creation_time}}</text>
				</view>
				<view class="list">
					<text class="name">期望交货时间</text>
					<text>{{item.plan_end_date}}</text>
				</view>
			</view>
			<view class="btnbox1">
				<navigator class="btn" :url="'./upload?type=1&id=' + item.id" hover-class="none" >上传装货单</navigator>
				<!-- <navigator class="btn" :url="'./upload?type=2&id=' + item.id" hover-class="none" >上传卸货单</navigator> -->
				<view class="btn"  hover-class="none" @tap="callPhone(item.driver_mobile)">联系司机</view>
				<view class="btn" @tap="endTransport">运输完成</view>
				<navigator class="btn" :url="'./info?id=' + item.id" hover-class="none">查看详情</navigator>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<view class="popup" @tap="close" v-if="showPopup">
			<view class="box" @tap.stop="!close">
				<view class="uni-input-wrapper ipt">
					<input placeholder-class="input-style" placeholder="请输入订单编号" v-model="search"/>
					<uni-icons type="clear" size="24" color="#c0c4cc" v-if="search!=''" @click="search = ''"></uni-icons>
				</view>
				<!-- <uni-data-select v-model="type" :localdata="range" 
				placeholder="请选择"	style="margin-bottom: 20rpx;"></uni-data-select> -->
				<view class="uni-list-cell-db ipt">
					<picker mode="date" :value="startDate" @change="bindDateChange">
						<view class="uni-input" v-if="startDate">{{startDate}}</view>
						<view class="input-style" v-else>请选择开始日期</view>
					</picker>
					<text style="color: #999;">——</text>
					<picker mode="date" :value="endDate" @change="bindEndChange">
						<view class="uni-input" v-if="endDate">{{endDate}}</view>
						<view class="input-style" v-else>请选择结束日期</view>
					</picker>
				</view>
				<view class="btnbox">
					<view class="btn" @tap="reset">重置</view>
					<view class="btn search" @tap="searchlist">搜索</view>
				</view>
			</view>
		</view>
		
		<!-- 运输完成弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="提示" content="确认运输完成？"
				@confirm="confirmEnd"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {sellList} from '../../../network/main.js';
	import {
		getOrderList,
		endOrder,uploadContract
	} from '../../../network/order.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {ref,reactive } from 'vue';
	onNavigationBarButtonTap(()=>{
		showPopup.value = true
	})
	onShow(()=>{
		list.length =0
		getList()
	})
	const list = reactive([])
	const getList = ()=>{
		let data = {
			status:active.value,
			sn_code:search.value,
			start_date:startDate.value,
			end_date:endDate.value
		}
		getOrderList(data).then(res=>{
			let arr  = res.data.data.sort( function(a, b) {
				return  new Date(b.creation_time) - new Date(a.creation_time)
			})
			Object.assign(list,arr)
		})
	}
	const checktab = (type)=>{
		active.value = type
		list.length =0
		getList()
	}
	const active = ref(1)
	const showPopup = ref(false)
	const range = reactive([{
			value: 0,
			text: '接单有效截止日期'
		},
		{
			value: 1,
			text: '下单时间'
		},
		{
			value: 2,
			text: '计划发车时间'
		}
	])
	const search = ref('')
	const type = ref('')
	const close = () => {
		showPopup.value = false
	}
	const startDate = ref('')
	const bindDateChange = (e) => {
		startDate.value = e.detail.value
	}
	const endDate = ref('')
	const bindEndChange = (e) => {
		endDate.value = e.detail.value
	}
	const reset = () => {
		search.value = ''
		type.value = ''
		startDate.value= ''
		endDate.value = ''
		showPopup.value = false
		list.length =0
		getList()
	}
	const searchlist = ()=>{
		showPopup.value = false
		list.length =0
		getList()
	}
	const callPhone = (phone)=>{
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	const alertDialog = ref(null)
	const endTransport = ()=>{
		alertDialog.value.open()
	}
	const confirmEnd = ()=>{
		uni.showToast({
			title: '运输完成'
		})
	}
</script>

<style lang="scss">
	.tab {
		width: 100%;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-between;
	
		.list {
			width: 33%;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			background-color: #fff;
		}
	
		.active {
			background-color: #ffc400;
		}
	}
	.box{
		border: 2rpx solid #f7f7f7;
	}
	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;
	
		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
	
			.status {
				font-size: 28rpx;
			}
		}
	
		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;
	
			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}
	}
	
	.btnbox1 {
		width: 100%;
		display: flex;
		justify-content:flex-end;
		padding: 0 30rpx;
		box-sizing: border-box;
		gap: 30rpx;
		margin: 30rpx 0;
	
		.btn {
			height: 50rpx;
			width: 160rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #ffc400;
			border-radius: 10rpx;
		}
	}
	
	.popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .5s;
	
		.box {
			width: 100%;
			height: 360rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			gap: 10rpx;
			padding-bottom: 20rpx;
	
			.ipt {
				height: 70rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				input{
					width: 700rpx;
				}
			}
	
			.btnbox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
	
				.btn {
					width: 180rpx;
					height: 60rpx;
					background-color: #f8f8f8;
					line-height: 60rpx;
					text-align: center;
					border-radius: 12rpx;
					font-size: 26rpx;
				}
	
				.search {
					background-color: #ffc400;
				}
			}
		}
	}
</style>